<%@ page import="fr.nantes.univ.DAO.AddressBookDAO"%>
<%@ page import="fr.nantes.univ.DAO.RubbishCollectionDAO"%>
<%@ page import="fr.nantes.univ.EntityBeans.AddressBook"%>
<%@ page import="fr.nantes.univ.EntityBeans.RubbishCollection"%>
<%@ page import="java.util.List"%>
<html>
    <head>
        <title>My account</title>
        <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
        <link type="text/css" rel="stylesheet" href="/stylesheets/menu.css" />
        <link type="text/css" rel="stylesheet" href="/stylesheets/container.css" />
        <link type="text/css" rel="stylesheet" href="/stylesheets/map.css" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|PT+Sans+Caption:400,700' rel='stylesheet' type='text/css' />
        <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANlSKCcxC-zerJQTLytFPdUfsIkFub6co&sensor=true">
        </script>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script type="text/javascript" src="/js/content.js"></script>
        <script type="text/javascript" src="http://documentcloud.github.io/underscore/underscore.js"></script>
        <script type="text/javascript">
            var map;
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(47.21806, -1.55278),
                    zoom: 11,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map"),
                    mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
            var addressBook = {};
            var addressBookRivoli = {};
            var addressBookLatitude = {};
            var addressBookLongitude = {};
            var bleuJourCollecte = {};
            var jauneJourCollecte = {};
            <% List<AddressBook> addressBooksList = AddressBookDAO.findAll(); %>
            <% for (int i = 0; i < addressBooksList.size(); i++) { %>
                addressBook["<%= addressBooksList.get(i).getAdresse() %>"] = "<%= addressBooksList.get(i).getAdresse() %>";
                addressBookRivoli["<%= addressBooksList.get(i).getAdresse() %>"] =  "<%= addressBooksList.get(i).getRivoli() %>";
                addressBookLatitude["<%= addressBooksList.get(i).getAdresse() %>"] =  "<%= addressBooksList.get(i).getLatitude() %>";
                addressBookLongitude["<%= addressBooksList.get(i).getAdresse() %>"] =  "<%= addressBooksList.get(i).getLongitude() %>";
            <% }%>
            <% List<RubbishCollection> rubbishCollectionsList = RubbishCollectionDAO.findAll(); %>
            <% for (int i = 0; i < rubbishCollectionsList.size(); i++) { %>
                bleuJourCollecte["<%= rubbishCollectionsList.get(i).getRivoli() %>"] = "<%= rubbishCollectionsList.get(i).getBleuJourCollecte() %>";
                jauneJourCollecte["<%= rubbishCollectionsList.get(i).getRivoli() %>"] = "<%= rubbishCollectionsList.get(i).getJauneJourCollecte() %>";
            <% }%>
            $(function() {
                $("#address").autocomplete({
                    source: _.keys(addressBook),
                    select: function(event, ui) {
                        var lat = parseFloat(addressBookLatitude[ui.item.value]);
                        var longi = parseFloat(addressBookLongitude[ui.item.value]);
                        var mapOptions = {
                            center: new google.maps.LatLng(lat, longi),
                            zoom: 17,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        map = new google.maps.Map(document.getElementById("map"), mapOptions);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(lat, longi),
                            map: map,
                            title: ui.item.value
                        });
                        var infowindow = new google.maps.InfoWindow({
                            position: new google.maps.LatLng(lat, longi),
                            content: "Jour bleu : " + bleuJourCollecte[addressBookRivoli[ui.item.value]] + "<br/>Jour jaune : " + jauneJourCollecte[addressBookRivoli[ui.item.value]]
                        });
                        infowindow.open(map, marker);
                    }
                });
           });
        </script>
    </head>
    <body>
<jsp:include page="/menu.jsp" flush="true" />
        <div class="hcontainer">
            <form method="POST">
                <p>Enter your address<br/><input type="text" id="address" name="address" /></p>
                <input type="submit"/>         <input type="reset"/>
            </form>
        </div>
<jsp:include page="/hmap.jsp" flush="true" />
    </body>
</html>